<template>
	<view>
		<view class="listindex">
			<view class="flexes">
				<view class="index-item">1H爆仓</view>
				<view class="index-item1">￥5.99 <text>亿</text></view>
				<view class="index-item">￥22.16亿</view>
			</view>
			<view class="flexes">
				<view class="index-item">24H爆仓</view>
				<view class="index-item1">￥5.99 <text>亿</text></view>
				<view class="index-item">￥22.16亿</view>
			</view>
		</view>
		<view class="time">
			24H大额爆仓
		</view>
		<view class="listtitle color" v-for="(item,index) in list.slice(0,start?'11':'3')" :key="index">
			<view class="listtitle-item">{{item.market || '永续'}}</view>
			<view class="listtitle-item" style="text-align: center;" :class="item.type=='23'?'color-rise':'color-fall'">{{item.type=='23'?'多单':'空单'}}</view>
			<view class="listtitle-item" style="text-align: right;">${{printer(item.value)}}万</view>
			<view class="listtitle-item ">{{datatime(item.create_time)}}</view>
			<!-- <view class="listtitle-item color-neutral">{{item.name5}}</view> -->
		</view>
		<view class="more" @tap="start=!start">
			{{start?'点击收起':'查看更多'}} <u-icon :name="start?'arrow-up':'arrow-down'" style="margin-left: 10rpx;"></u-icon>
		</view>
		<!-- <hide v-if="list.length=='0'"/> -->
	</view>
	
</template>

<script>
	export default {
		name:'List',
		props:{
			listtitle:{
				type:Array
			},
			list:{
				type:Array
			}
		},
		computed:{
			printer(){
				return t=>{
					if(!t) return '100.00'
					return Number(t/10000).toFixed(2)
				}
			},
			datatime(){//时间戳
			  return t=>{
				   let time = new Date(t)
				        let year = time.getFullYear()
				        const month = (time.getMonth() + 1).toString().padStart(2, '0')
				        const date = (time.getDate()).toString().padStart(2, '0')
				        const hours = (time.getHours()).toString().padStart(2, '0')
				        const minute = (time.getMinutes()).toString().padStart(2, '0')
				        const second = (time.getSeconds()).toString().padStart(2, '0')
				        return hours + ':' + minute
			  }
			}
		},
		data() {
			return {
				start:false
			};
		},
	}
</script>

<style lang="scss">
.color{
	color: $color-white !important;
	font-size: 27rpx !important;
	font-weight: 500 !important;
}
.listindex{
	@include flex;
	justify-content: space-between;
	margin: 20rpx 0rpx;
	.flexes{
		border-radius: 16rpx;
		background: rgba(22, 119, 255, 0.05);
		padding: 30rpx 20rpx;
		width: 300rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		// line-height: 34px;
		color: #FFFFFF;
		.index-item1{
			color: #FE485A;
			font-size: 35rpx;
			line-height: 60rpx;
			text{
				padding-left: 5rpx;
				font-size: 28rpx;
			}
		}
	}
}
.time{
	font-size: 32rpx;
	font-weight: bold;
	margin: 30rpx 0rpx 20rpx;
}
.listtitle{
	@include flex;
	justify-content: space-between;
	align-items: center;
	font-weight:bold;
	color: $color-fu;
	line-height: 60rpx;
	.listtitle-item{
		width: 25%;
		font-size: 26rpx;
		
	}
	.texts{
		font-size: 25rpx !important;
	}
	// .listtitle-item:nth-child(1){
	// 	width: 18%;
	// }
	
	// .listtitle-item:nth-child(2){
	// 	width: 21%;
	// }
	.listtitle-item:nth-child(1){
		width: 33%;
		// border: 1px solid red;
	}
	.listtitle-item:nth-child(4){
		width: 21%;
		// border: 1px solid red;
		text-align: right;
	}
	// .listtitle-item:nth-child(3){
	// 	width: 18%;
	// }
	// .listtitle-item:nth-child(5){
	// 	width: 18%;
	// 	text-align: right;
	// }
}
.more{
	text-align: center;
	margin-top: 15rpx;
	color: $light-color;
}
</style>
